<template>
  <!--批量活动绩效查询-->
  <div>
    <TopFilter :list="topFilterList" :cols="4" labelWidth="100" :collapse="true" @filterChange="changeHandle"
               @onCollapse="collapseHandle"></TopFilter>
    <FilterTable ref="table" :columns="columns" :fetchapi="fetchApi" :params="fetchParams" datakey="records"
                 :isSelectColumn="false" :onColumnsChange="columns => (this.columns = columns)">
      <template slot="controls" slot-scope="props">
        <el-button size="small" icon="el-icon-download">下载</el-button>
      </template>
    </FilterTable>
  </div>
</template>

<script>
  import {mapState} from 'vuex';
  import {dictionary} from '@/utils/dictMixin';
  import moment from 'moment';
  import {listRecord} from '@/api/repair/batchEventManagement/activityDistribution';

  export default {
    name: 'index',
    mixins: [dictionary],
    data()
    {
      this.BaseTable = null;
      this.conf = {add: '新增', edit: '编辑', show: '显示'};
      return {
        topFilterList: this.createTopFilterList(),
        visible: false,
        visibleDetail: false,
        fetchApi: listRecord,
        dialogTitle: '',
        fetchParams: {xhrAbort: false},
        columns: this.createTableColumns(),
        handleType: '',
        formData: {}
      };
    },
    components: {
    },

    mounted()
    {
      this.BaseTable = this.$refs.table.$refs.pageTable;
    },
    methods: {
      createTableColumns()
      {
        return [
          {
            title: '序号',
            dataIndex: 'index',
            width: 70,
            sorter: true,
            render: props =>
            {
              return <span>{props.row.index + 1}</span>;
            }
          },
          {
            title: '经销商代码',
            dataIndex: 'maStatus',
            width: 150,
            sorter: true,
            filter: true,
            filterType: 'input',
          },
          {
            title: '活动编号',
            dataIndex: 'maNo',
            width: 150,
            sorter: true,
            filter: true,
            filterType: 'input'
          },

          {
            title: '活动主题',
            dataIndex: 'maTitle',
            sorter: true,
            filter: true,
            filterType: 'input',
          },
          {
            title: '活动等级',
            dataIndex: 'maLevel',
            sorter: true,
            filter: true,
            filterType: 'checkbox',
            filterItems:this.createDictList(1017),
            render: props =>
            {
              return <span>{this.createDictText(props.row.maLevel, 1017)}</span>;
            }
          },
          {
            title: '活动类型',
            dataIndex: 'partCode',
            width: 150,
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '是否执行',
            dataIndex: 'partName',
            width: 150,
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '绩效',
            dataIndex: 'partName',
            width: 150,
            sorter: true,
            filter: true,
            filterType: 'input'
          },
          {
            title: '活动开始日期',
            dataIndex: 'bDate',
            width: 150,
            sorter: true,
            dateFormat: 'yyyy-MM-dd',
            filter: true,
            filterType: 'date-range'
          },
          {
            title: '申报截止日期',
            dataIndex: 'bDate',
            width: 150,
            sorter: true,
            dateFormat: 'yyyy-MM-dd',
            filter: true,
            filterType: 'date-range'
          },
          {
            title: '活动结束日期',
            dataIndex: 'eDate',
            width: 150,
            sorter: true,
            dateFormat: 'yyyy-MM-dd',
            filter: true,
            filterType: 'date-range'
          },
          {
            title: '发布日期',
            dataIndex: 'maDate',
            width: 150,
            sorter: true,
            dateFormat: 'yyyy-MM-dd',
            filter: true,
            filterType: 'date-range'
          },
          {
            title: '更新日期',
            dataIndex: 'maDate',
            width: 150,
            sorter: true,
            dateFormat: 'yyyy-MM-dd',
            filter: true,
            filterType: 'date-range'
          }
        ];
      },
      createTopFilterList()
      {
        return [
          {
            type: 'INPUT',
            label: '活动编号',
            fieldName: 'maNo',
            placeholder: '活动编号...'
          },
          {
            type: 'INPUT',
            label: '活动主题',
            fieldName: 'maTitle',
            placeholder: '活动主题...'
          },
          {
            type: 'INPUT',
            label: '经销商代码',
            fieldName: 'maTitle2',
            placeholder: '活动主题...'
          },

          {
            type: 'SELECT',
            label: '发布状态',
            fieldName: 'isValid',
            placeholder: '请选择',
            itemList: this.createDictList(1004)
          },
          {
            type: 'RANGE_DATE',
            label: '活动日期',
            dateType: 'daterange',
            // initialValue: [
            //   moment(new Date())
            //     .subtract(1, 'months')
            //     .format('YYYY-MM-DD'),
            //   moment(new Date()).format('YYYY-MM-DD')
            // ],
            style: {minWidth: '200px'},
            fieldName: 'bDate|eDate'
          }
        ];
      },
      collapseHandle()
      {
        this.$nextTick(() =>
        {
          this.BaseTable.EXECUTE_RESET_HEIGHT();
        });
      },

      changeHandle(val)
      {
        // val.bDate=moment(val['bDate']).format('YYYY-MM-DD')
        // val.eDate=moment(val['eDate']).format('YYYY-MM-DD')
        this.fetchParams = Object.assign({}, val);

        console.log(this.fetchParams)
      },
    }
  };
</script>

<style lang="less" scoped></style>
